<template>
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{this.$route.meta.title}}
      </div>

      <el-form >
        <el-form-item>
          <el-select v-model="listPram.isDel" placeholder="状态" class="selWidth" @change="getList">
            <el-option label="全部" value=""></el-option>
            <el-option label="显示" :value="0"></el-option>
            <el-option label="不显示" :value="1"></el-option>
          </el-select>
          <el-button  type="warning" @click="handleAddMenu({ id: 0, name: '顶层目录' })">新增权限</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="tableData" :data="tableData" row-key="id" highlight-current-row
        :row-class-name="tableRowClassName" :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
        :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }" 
        >
        <el-table-column prop="name" label="名称" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.name }} | {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="150">
          <template slot-scope="scope">
            <span v-if="(scope.row.type == 0)">目录</span>
            <span v-if="(scope.row.type == 1)">菜单</span>
            <span v-if="(scope.row.type == 2)">按钮</span>
          </template>
        </el-table-column>
        <el-table-column label="分类图标" min-width="80">
          <template slot-scope="scope">
            <div class="listPic">
              <i :class="'el-icon-' + scope.row.icon" style="font-size: 20px;" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="URL" min-width="250">
        </el-table-column>
        <el-table-column label="权限" min-width="250">
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.permission }}{{ scope.row.component }}</span>
          </template> -->
        </el-table-column>
        <!--<el-table-column label="排序" prop="sort" min-width="150" />-->
        <el-table-column label="状态" min-width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-text="显示"
              inactive-text="隐藏" @change="onchangeIsShow(scope.row)" :disabled="scope.row.type == 2" />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleAddMenu(scope.row)">添加子目录</el-button>
            <el-button type="text" size="small" @click="handleEditMenu(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelMenu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-card>


    <el-dialog v-if="editDialogConfig.visible" :title="(editDialogConfig.isCreate === 0 ? `创建权限` : `编辑权限`)"
      :visible.sync="editDialogConfig.visible" destroy-on-close :close-on-click-modal="false">
      <edit v-if="editDialogConfig.visible" :prent="editDialogConfig.prent" :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.data" :biztype="editDialogConfig.biztype" :all-tree-list="tableData"
        @hideEditDialog="hideEditDialog" :type="type" />
    </el-dialog>
  </div>
</template>

<script>
import { asyncRoutes, constantRoutes } from '@/router'
import { getAllPermissionForTree, permissionDelete, permissionUpdateStatus } from '@/api/permission.js'
import edit from './edit.vue'
import { clearTreeData } from '@/utils/ZBKJIutil.js'
export default {
  name: "PromiseRules",
  components: { edit },
  data() {
    return {
      asyncRoutes,
      constants: this.$constants,
      type: 0,
      //弹出窗
      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        prent: {}, // 父级对象
        data: {},
        biztype: this.type // 统一主业务中的目录类型
      },
      //表格树形表数据
      tableData: [],
      listPram: {
        isDel: '',
        show: true,
      },
    }
  },
  created() {
    this.type = parseInt(this.$route.params.type);
    // console.log(this.$route)
  },
  mounted() {
    this.getList()
  },
  methods: {
    //获取列表
    getList() {
      getAllPermissionForTree(this.listPram).then((res) => {
        //console.log('data', res)
        this.tableData = clearTreeData(res.data)
        //console.log('captchatImg', this.loginForm.key)
      }).catch((err) => {
        //console.log(res)
        this.$message.error(err.msg)
      })
    },
    categoryAdd(pram) {
      const _pram = {
        extra: pram.extra,
        name: pram.name,
        pid: pram.pid,
        sort: pram.sort,
        status: pram.status,
        type: pram.type,
        url: pram.url,
        belong: this.type
      }
      console.log(pram)
      categoryApi.addCategroy(_pram).then(data => {
        this.$message.success('添加菜单成功')
      })
    },
    hideEditDialog() {
      setTimeout(() => {
        this.editDialogConfig.prent = {}
        this.editDialogConfig.type = 0
        this.editDialogConfig.visible = false
        this.getList()
      }, 200)
    },
    //新增
    handleAddMenu(rowData) {
      this.editDialogConfig.isCreate = 0
      this.editDialogConfig.prent = JSON.parse(JSON.stringify(rowData)); //已经对象里面有数组对象。所以要深拷贝 不然用assign会导致数组对象里的对象是内存地址指向导致会被修改
      this.editDialogConfig.data = {}
      this.editDialogConfig.biztype = this.biztype
      this.editDialogConfig.visible = true
    },
    //编辑
    handleEditMenu(rowData) {
      this.editDialogConfig.isCreate = 1
      this.editDialogConfig.data = JSON.parse(JSON.stringify(rowData)); //已经对象里面有数组对象。所以要深拷贝 不然用assign会导致数组对象里的对象是内存地址指向导致会被修改
      this.editDialogConfig.prent = JSON.parse(JSON.stringify(rowData)); //已经对象里面有数组对象。所以要深拷贝 不然用assign会导致数组对象里的对象是内存地址指向导致会被修改
      this.editDialogConfig.visible = true
    },
    //删除
    handleDelMenu(rowData) {
      this.$confirm('确定删除当前数据?').then(() => {
        permissionDelete(rowData.id).then(res => {
          this.$message.success('删除成功')
          this.getList()
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      })
    },
    //显示和隐藏
    onchangeIsShow(row) {
      permissionUpdateStatus(row).then((res) => {
        this.$message.success(res.msg)
        this.getList()
      }).catch((err) => {
        //console.log(err)
        row.status == 0 ? row.status = 1 : row.status = 0;
        this.$message.error(err.msg)
      })
    },
    //行样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return "warning-row";
      }
    },
  }
}
</script>



<style lang="scss" scoped>
.el-table .warning-row {
  background: rgb(255, 247, 252);
  /*background: rgba(255, 252, 247, 1);*/
}
</style>
